<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index-list.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 版心 -->
        <div class="header-con">
            <ul>
                <li>网站首页</li>
                <li>传悦资源</li>
                <li class="select">传悦案例</li>
                <li>传悦服务</li>
                <li>解决方案</li>
                <li>提交需求</li>
            </ul>
            <ul>
                <li>
                    <img src="img/phone.png" alt="">
                </li>
                <li>
                    0535-21223233
                </li>
                <li>
                    <img src="img/qq.png" alt="">
                </li>
                <li>
                    <img src="img/weibo.png" alt="">
                </li>
                <li>
                    <img src="img/weixin.png" alt="">
                </li>
                <li>
                    <img src="img/Email.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div class="box">
        <!-- 背景图 -->
        <div class="banner">
            <!-- 版心 -->
            <div class="banner-con">
                <div class="title">
                    网络全案营销服务提供商
                </div>
            </div>
        </div>
        <!-- 当前位置 -->
        <div class="location">
            <!-- 版心 -->
            <div class="location-con">
                <span>网站首页</span>
                <span>></span>
                <span>传悦案例</span>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li class="select">全部</li>
            <li>网站建设</li>
            <li>推广运营</li>
            <li>品牌策划</li>
            <li>网络全案</li>
        </ul>
    </div>
    <!-- 案例 -->
    <div class="case">
        <ul id="list">

        </ul>
        <li id="template">
            <img src="" alt="">
            <div>
                <a href="details.html"></a>
            </div>
            <p></p>
        </li>
    </div>
    <!--页数 -->
    <div class="page">
        <ul>
            <li>
                < </li>
                    <li>1</li>
                    <li class="select">2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>
                        >
                    </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <!-- 版心 -->
        <div class="footer-con">
            <ul>
                <li>关于传悦</li>
                <li>新闻动态</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
                <li>加入传悦</li>
                <li>付款账户</li>
            </ul>
            <p>
                Copyright 2013 创梦网络科技有限责任公司 || 传悦 Chnyoo.cn All Rights Reserved 京ICP备12005221号
            </p>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        // 点击标题即可跳转页面
        $.ajax({
            url: "http://10.35.170.250:8080/getList",
            success(data) {
                data.forEach(item => {
                    // console.log(item);
                    let newItem = $("#template").clone();
                    newItem.attr("id", "");
                    newItem.find("img").attr("src", item.img);
                    newItem.find("a").html(item.title);
                    newItem.find("a").attr("href", `details.html?id=${item.id}`);
                    newItem.find("p").html(item.introduce);
                    newItem.appendTo($("#list"));
                })
            }
        })
    </script>
</body>

</html>